<template>
    <div class="main-page-content page-demo-table-advanced-article">

        <ContentHeader title="这里是文章列表" explain="扒拉扒拉一大堆，都是废话">
            <template slot="content">
                
                <!-- article-header start -->
                <div class="article-header">
                    <div class="header-search">
                        <a-input-search size="large" placeholder="请输入要查询的内容" enter-button @search="onSearch" />
                    </div>
                    <div class="header-tabs">
                        <a-tabs v-model="article_tabs_active" >
                            <a-tab-pane v-for="(item, index) in article_tabs" :key="index">
                                <span slot="tab">
                                    <!-- <a-icon :type="item.icon" /> -->
                                    {{ item.name }}
                                </span>
                            </a-tab-pane>
                        </a-tabs>
                    </div>
                </div>
                <!-- article-header end -->

            </template>
        </ContentHeader>

        <!-- page-content start -->
        <div class="page-content">
            <a-form-model
                ref="searchForm"
                :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }"
                :model="search_form">
                <a-row  class="form-row">
                    <a-col :span="2">
                        <span>文章类型：</span>
                    </a-col>
                    <a-col :span="20">
                        <template v-for="tag in article_class">
                            <a-checkable-tag
                                :key="tag"
                                :checked="selected_class.indexOf(tag) > -1"
                                @change="checked => handleChangeClass(tag, checked)"
                            >
                                {{ tag }}
                            </a-checkable-tag>
                        </template>
                    </a-col>
                </a-row>
                <a-divider dashed />
                <a-row >
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-model-item label="所属作者：" >
                            <a-select v-model="search_form.author" placeholder="根据文章作者筛选" style="width:100%;">
                                <a-select-option value="1">成都分公司</a-select-option>
                                <a-select-option value="2">宜宾分公司</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-model-item label="文章状态：" >
                            <a-select v-model="search_form.status" placeholder="根据文章状态筛选" style="width:100%;">
                                <a-select-option value="0">全部</a-select-option>
                                <a-select-option value="1">已发布</a-select-option>
                                <a-select-option value="2">未发布</a-select-option>
                                
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-model-item label="是否热门：" >
                            <a-select v-model="search_form.is_hot" placeholder="根据文章是否热门筛选" style="width:100%;">
                                <a-select-option value="0">全部</a-select-option>
                                <a-select-option value="1">是</a-select-option>
                                <a-select-option value="2">否</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </div>
        <!-- page-content end -->


        <div class="page-content">
            <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="list_data">
                <a-list-item slot="renderItem" key="item.title" slot-scope="item,">
                    <template v-for="{ type, text } in item.actions" slot="actions">
                        <span :key="type">
                            <a-icon :type="type" style="margin-right: 8px" />
                            {{ text }}
                        </span>
                    </template>
                    <a-list-item-meta >
                        <template slot="description">
                            <div class="tags" style="margin-bottom:8px;">
                                <a-tag>tags 1</a-tag>
                                <a-tag>tags 1</a-tag>
                                <a-tag>tags 1</a-tag>
                            </div>
                            <div class="description">
                                {{ item.description }}
                            </div>
                            
                        </template>
                        <a slot="title" :href="item.href">{{ item.title }}</a>
                    </a-list-item-meta>
                    {{ item.content }}
                </a-list-item>
            </a-list>
        </div>

    </div>
</template>

<script>
import ContentHeader from "@/components/content_header/content_header";


export default {
    components:{
        ContentHeader
    },
    data(){
        return {
            "article_tabs_active":1,
            "article_tabs"  : [
                { 'id':1, 'name':'安卓' },
                { 'id':2, 'name':'苹果' },
                { 'id':3, 'name':'黑莓' }
            ],
            // 文章类型
            "article_class" : ["企业新闻","行业动态","运营指导","名人名言","研发规范","企业介绍","轻松一刻","每日咨询"],
            "selected_class"    : [],

            // 查询表单
            "search_form"   : {
                "author"    : "",
                "status"    : 0,
                "is_hot"    : 0,
            },

            "list_data"  : [],
            "pagination"    : {
                onChange: page => {
                    this.buildListData();
                },
                pageSize: 12,
            },
            
        }
    },
    created(){
        this.buildListData();
    },
    methods:{
        buildListData(){
            var list_data = [];
            for (let i = 0; i < 23; i++) {
                list_data.push({
                    "href"  : 'http://www.baidu.com',
                    "title" : `这是第 ${i+1} 次说 ”我真的太帅了~“`,
                    "avatar"    : 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                    "description"   : '简单叙述一下，为什么帅，因为……不想说自己丑',
                    "content"   :'是的，这里是帅的内容…… 扒拉扒拉………… （10小时以后）……  看懂了吧？不懂？ 那我再扒拉扒拉一会儿~  扒拉扒拉扒拉扒拉……',
                    "actions"   : [
                            { type: 'star-o', text: '156' },
                            { type: 'like-o', text: '156' },
                            { type: 'message', text: '2' },
                        ],
                });
            }
            this.list_data = list_data;
        },
        onSearch(){

        },

        // 类型选择
        handleChangeClass(tag, checked) {
            const { selected_class } = this;
            const nextSelectedTags = checked
                ? [...selected_class, tag]
                : selected_class.filter(t => t !== tag);
            this.selected_class = nextSelectedTags;
        },
    }
}
</script>

<style lang="less" scoped>
@import "./article.less";
</style>